/**
 * 点检预览
 * author luogan
 */
import React, { useEffect, useState } from 'react'
import { connect } from 'dva'
import { Button, message } from 'antd'
import TitleLine from 'components/common/titleLine'
import PlanBaseInfo from '../PlanBaseInfo'
import DeviceMessage from 'components/common/deviceMessage';
import MaintenanceMessage from 'components/common/maintenanceMessage';
import router from 'umi/router'
import { withRouter } from 'umi'
import noImg from 'assets/no_Img.png'
import './index.less'

function CheckPreview({ dispatch, viewData, location, handleCancel, headerTaps: { panes }, query, deviceCheck: { facilityInfo, detailData } }) {
    const hiddenMsg = () => {
        //隐藏提示
        const nodata_error = document.querySelector('#nodata_error')
        if (nodata_error) {
            nodata_error.style.visibility = "hidden"
        }
    }

    // 创建时间
    const [createTime, setCreateTime] = useState('')
    // 新增： 获取创建人
    const [createdByUser, setCreatedByUser] = useState('')
    // 提交审批
    const handleSubmit = () => {
        delete viewData.checkuserData
        if (query && query.type === 'editor') {
            // 编辑点检计划
            dispatch({
                type: 'deviceCheck/toCheckUpdate',
                payload: {
                    ...viewData,
                    id: detailData.id
                }
            }).then((res) => {
                hiddenMsg()
                if (res && res.code === '000000') {
                    message.success(res.mesg)
                    handleCancel()
                    cancleClean()
                    return
                } else {

                    // 改条数据已被其他账号做除删除或其他操作
                    handleCancel()
                    // 关闭当前tabs
                    const { pathname } = location
                    const panesList = panes.filter(pane => pane.key !== pathname);
                    dispatch({
                        type: 'headerTaps/updateHeaderTaps',
                        payload: { panes: panesList },
                    })
                    message.error(res.mesg, 1.5, () => {
                        router.goBack()
                    })
                    return
                }
            })
            return
        }

        // 新增点检计划
        dispatch({
            type: 'deviceCheck/addCheck',
            payload: { ...viewData }
        }).then((res) => {
            hiddenMsg()
            if (res && res.code === '000000') {
                message.success(res.mesg)
                handleCancel()
                cancleClean()
                return
            } else {
                handleCancel()
                // 关闭当前tabs
                message.error(res.mesg)
                const { pathname } = location
                const panesList = panes.filter(pane => pane.key !== pathname)
                dispatch({
                    type: 'headerTaps/updateHeaderTaps',
                    payload: { panes: panesList },
                })
                router.goBack()
                return
            }
        })
    }

    function cancleClean() {
        const { pathname } = location
        const panesList = panes.filter(pane => pane.key !== pathname);
        dispatch({
            type: 'headerTaps/updateHeaderTaps',
            payload: { panes: panesList },
        });
        const catchName = pathname.split('/').filter(item => item !== '').join("_")
        dispatch({
            type: 'commonAction/uploadCatch',
            payload: {
                catchObj: {
                    [catchName]: [false, true]
                }
            }
        })
        dispatch({
            type: 'deviceCheck/updateSerachParams',
            payload: {
                serachParams: {
                    current: 1
                }
            }
        })
        router.push({
            pathname: '/deviceCheck',
            params: {
                isRefresh: true
            }
        })
    }

    const { checkuserData } = viewData

    // 获取当前创建时间
    useEffect(() => {
        format()
    }, [format])

    function format() {
        let nowDate = new Date()
        let year = nowDate.getFullYear();     //获取当前时间的年份
        let month = nowDate.getMonth() + 1;   //获取当前时间的月份，月份从0开始，所以需要加一
        let day = nowDate.getDate();          //获取当前时间的日期
        let hour = nowDate.getHours();        //获取当前时间的小时数
        let minute = nowDate.getMinutes();    //获取当前时间的分钟数
        let second = nowDate.getSeconds();    //获取当前时间的秒数

        let newMonth = month < 10 ? '0' + month : month
        let newDay = day < 10 ? '0' + day : day
        let newHour = hour < 10 ? '0' + hour : hour
        let newMinute = minute < 10 ? '0' + minute : minute
        let newSecond = second < 10 ? '0' + second : second
        const time = year + '-' + newMonth + '-' + newDay + ' ' + newHour + ':' + newMinute + ':' + newSecond

        if (query && query.type !== 'editor') {
            const createdByUser = JSON.parse(sessionStorage.getItem('loginInfo')).name
            setCreateTime(time)
            setCreatedByUser(createdByUser)

        } else {
            setCreateTime('')
            setCreatedByUser('')
        }
    }

    return (
        <div className="checkPreview">
            <div className='contentBody'>
                <div className='baseInfome'>
                    <TitleLine title='计划基本信息' />
                    <div className='name_time paddStyl'>
                        <div>
                            <span className='viewTitle'>计划名称：</span>
                            <span className='viewContent'>{viewData.name}</span>
                        </div>
                        <div>
                            <span className='viewTitle'>创建人：</span>
                            <span className='viewContent'>{createdByUser ? createdByUser : detailData.createdBy}</span>
                        </div>
                        <div>
                            <span className='viewTitle' style={{ marginLeft: '0.3rem' }}>创建时间：</span>
                            <span className='viewContent'>{createTime ? createTime : detailData.createdTime}</span>
                        </div>
                    </div>
                    <div className='stration paddStyl'>
                        <span className='viewTitle'>计划描述：</span>
                        <span className='viewContent'>{viewData.remark}</span>
                    </div>
                </div>
                <div className='humanbox'>
                    <div className='centerBox'>
                        <DeviceMessage title={'设备信息'} deviceInfo={facilityInfo} diff={true}/>
                        {/* <TitleLine title='设备信息' />
                        <div className='centerfoot'>
                            <div className='imgbox'>
                                <img src={facilityInfo && facilityInfo.deviceImage ? facilityInfo.deviceImage : noImg} alt='' />
                                <div className='imgalt'>
                                    <span>设备状态<span className='imgalText'>{facilityInfo && facilityInfo.runStatusStr}</span></span>
                                    <span>台账状态<span className='imgalText'>{facilityInfo && facilityInfo.ledgerStatusStr}</span></span>
                                </div>
                            </div>
                            <div className='mesgbox'>
                                <div className='mesgboxTop'>
                                    <div className='mesgboTop_title'>{facilityInfo && facilityInfo.deviceName}</div>
                                    <span className='create_title'>创建日期</span>
                                    <span className='crate_time'>{facilityInfo && facilityInfo.createdTime}</span>
                                </div>
                                <div className='otsidebox'>
                                    <div className='contentbox'>
                                        <span className='titles'>设备类型</span>
                                        <span className='contents'>{facilityInfo && facilityInfo.deviceTypeName}</span>
                                    </div>
                                    <div className='contentbox'>
                                        <span className='titles'>设备编号</span>
                                        <span className='contents'>{facilityInfo && facilityInfo.deviceNo}</span>
                                    </div>
                                    <div className='contentbox'>
                                        <span className='titles'>使用部门</span>
                                        <span className='contents'>{facilityInfo && facilityInfo.groupName}</span>
                                    </div>
                                   
                                    <div className='contentbox'>
                                        <span className='titles'>责任人 </span>
                                        <span className='contents'>{facilityInfo && facilityInfo.chargePerson}</span>
                                    </div>
                                </div>

                            </div>
                        </div> */}
                    </div>
                    <div className='rightBox'>
                        {/* <TitleLine title='点检员信息' />
                        <div className='userMsg'>
                            <div className='photobox'>
                                <div className='photo_title'>员工头像</div>
                                <div className='photo'><img src={checkuserData && checkuserData.headImage ? checkuserData.headImage : noImg} alt='' /></div>
                            </div>
                            <div className='msg'>
                                <div className='msgTitle'>
                                    <div className='title'>姓名</div>
                                    <div className='title'>员工编号</div>
                                    <div className='title'>手机号</div>
                                    <div className='title'>部门</div>
                                </div>
                                <div className='msgText'>
                                    <div className='text'>{checkuserData && checkuserData.name}</div>
                                    <div className='text'>{checkuserData && checkuserData.userNo}</div>
                                    <div className='text'>{checkuserData && checkuserData.mobile}</div>
                                    <div className='text'>{checkuserData && checkuserData.groupName}</div>
                                </div>
                            </div>
                        </div> */}
                        <MaintenanceMessage title={'点检员信息'} maintenanceInfo={checkuserData} />
                    </div>
                </div>
                <div className='objectInfo'>
                    <TitleLine title='点检项目信息' />
                    {
                        viewData.checkTaskList.map((item, index) => {
                            return <PlanBaseInfo data={item} key={item.serialNumber} showBorder={viewData.checkTaskList.length - 1 === index ? false : true} />
                        })
                    }
                </div>
            </div>
            <div className='footer'>
                <Button className="submitBtn" onClick={handleSubmit} >提交审批</Button>
                <Button className="cancelBtn" onClick={() => handleCancel()}>取消</Button>
            </div>
        </div>
    )
}

export default connect(({ deviceCheck, commonAction, headerTaps }) => ({
    deviceCheck, commonAction, headerTaps
}))(withRouter(CheckPreview))
